<script setup lang='ts'>
import type { HealthNews } from '@/types/healthnews'
import { onMounted, ref } from 'vue'
import { getLittleNews, getAllNews } from '@/services/healthNews'

const showNews = (newsId: string) => {
  uni.navigateTo({
    url: `/pages/healthNews/newsContent?newsId=${newsId}`,
  })
}

const messageList = ref<HealthNews[]>([])
const onPageLoad = async () => {
  const res = await getAllNews()
  messageList.value = res.data
}

onMounted(onPageLoad)
</script>

<template>
  <view class='top'>
    <view style='position: relative;top: 90px;font-size: 23px;'>#健康头条#</view>
    <view style='position: relative;top: 100px;'>科普健康知识 不再是小白</view>

  </view>

  <view class='container'>
    <view class='newsItem' v-for='item in messageList' :key='item.id'>
      <view class='left'>
        <image :src='item.imagUrl' @tap='showNews(item.id)' />
      </view>
      <view class='right'>
        <view class='title' @tap='showNews(item.id)'>
          <u-ellipsis-text :line='1'>
            {{ item.newsTitle }}
          </u-ellipsis-text>
        </view>

        <view class='introduction' @tap='showNews(item.id)'>
          <rich-text :nodes='item.newsContent' style='text-decoration: none;'></rich-text>
        </view>
      </view>
    </view>
  </view>
  <!-- <view @tap="selectMore">1111232</view> -->
</template>

<style lang='scss' scoped>
.top {
  width: 100%;
  height: 250px;
  background-image: url(@/static/images/R-C.jpg);
  /* display: inline-block; */
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #02100b;
}

.container {
  width: 100%;
  padding: 10px;
  background-color: #f8f8f8;

  .newsItem {
    width: 100%;
    //height: 120px;
    display: flex;
    margin-bottom: 10px;
    height: 220rpx;
    justify-content: center;
    border-bottom: 1px solid rgb(189, 186, 186);


    .left {
      width: 120px;
      margin-right: 5px;

      image {
        width: 110px;
        height: 100px;
      }
    }

    .right {
      width: 250px;

      .title {
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 15px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: nowrap;

      }

      .introduction {
        width: 500rpx;
        margin-top: 27px;
        color: grey;
        font-size: 15px;
        overflow: hidden;
        word-break: break-all;
        /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2;
        /** 显示的行数 **/
      }

    }
  }
}</style>
